﻿@page "/features/display"

<DocsPage>
    <DocsPageHeader Title="Display" SubTitle="The display classes helps you set display type or change it upon viewport." />
    <DocsPageContent>
        <DocsPageSection>
            <MudText Typo="Typo.h4" GutterBottom="true">How it works</MudText>
            <MudText>Specify the elements <CodeInline>display</CodeInline> property, the classes can be used with all breakpoints from <CodeInline>xs</CodeInline> to <CodeInline>xl</CodeInline></MudText>
            <div class="d-flex">

            </div>
            <MudText Class="pt-6 pb-2">The <b>propertys</b></MudText>
            <ul class="mud-typography-body1">
                <li><CodeInline>.d-{value}</CodeInline> - for <CodeInline>xs</CodeInline></li>
                <li><CodeInline>.d-{breakpoint}-{value}</CodeInline> - for <CodeInline>sm</CodeInline>, <CodeInline>md</CodeInline>, <CodeInline>lg</CodeInline> and <CodeInline>xl</CodeInline></li>
            </ul>
            <MudText Class="pt-6 pb-2">The <b>value</b> property is one of these</MudText>
            <MudGrid>
                <MudItem>
                    <ul class="mud-typography-body1">
                        <li><CodeInline>none</CodeInline></li>
                        <li><CodeInline>inline</CodeInline></li>
                        <li><CodeInline>inline-block</CodeInline></li>
                    </ul>
                </MudItem>
                <MudItem>
                    <ul class="mud-typography-body1">
                        <li><CodeInline>block</CodeInline></li>
                        <li><CodeInline>table</CodeInline></li>
                        <li><CodeInline>table-cell</CodeInline></li>
                    </ul>
                </MudItem>
                <MudItem>
                    <ul class="mud-typography-body1">
                        <li><CodeInline>table-row</CodeInline></li>
                        <li><CodeInline>flex</CodeInline></li>
                        <li><CodeInline>inline-flex</CodeInline></li>
                    </ul>
                </MudItem>
            </MudGrid>
            <MudText>When setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up.</MudText>
            <MudTabs Rounded="true" Outlined="true" Class="mt-12">
                <MudTabPanel Text="d-inline">
                    <SectionContent Outlined="true" Class="mt-6" Style="height:130px;">
                        <DisplayDinlineExample />
                    </SectionContent>
                    <SectionSource Code="DisplayDinlineExample" />
                </MudTabPanel>
                <MudTabPanel Text="d-block">
                    <SectionContent Outlined="true" FullWidth="true" Class="mt-6" Style="height:130px;">
                        <DisplayDblockExample />
                    </SectionContent>
                    <SectionSource Code="DisplayDblockExample" />
                </MudTabPanel>
            </MudTabs>
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Visibility</Title>
                <Description>Display a element based on the current viewport. The same brakepoint classes apply from the bottom up. That means <CodeInline>.d-none</CodeInline> apply to all breakpoints, but <CodeInline>.d-md-none</CodeInline> will only apply to <CodeInline>md</CodeInline> and up.</Description>
            </SectionHeader>
            <MudSimpleTable Outlined="true" Hover="true">
                <thead>
                    <tr><th>Screen size</th> <th>Class</th></tr>
                </thead>
                <tbody>
                    <tr><td>Hidden on all</td> <td><CodeInline>.d-none</CodeInline></td></tr>
                    <tr><td>Hidden only on xs</td> <td><CodeInline>.d-none .d-sm-flex</CodeInline></td></tr>
                    <tr><td>Hidden only on sm</td> <td><CodeInline>.d-sm-none .d-md-flex</CodeInline></td></tr>
                    <tr><td>Hidden only on md</td> <td><CodeInline>.d-md-none .d-lg-flex</CodeInline></td></tr>
                    <tr><td>Hidden only on lg</td> <td><CodeInline>.d-lg-none .d-xl-flex</CodeInline></td></tr>
                    <tr><td>Hidden only on xl</td> <td><CodeInline>.d-xl-none</CodeInline></td></tr>
                    <tr><td>Visible on all</td> <td><CodeInline>.d-flex</CodeInline></td></tr>
                    <tr><td>Visible only on xs</td> <td><CodeInline>.d-flex .d-sm-none</CodeInline></td></tr>
                    <tr><td>Visible only on sm</td> <td><CodeInline>.d-none .d-sm-flex .d-md-none</CodeInline></td></tr>
                    <tr><td>Visible only on md</td> <td><CodeInline>.d-none .d-md-flex .d-lg-none</CodeInline></td></tr>
                    <tr><td>Visible only on lg</td> <td><CodeInline>.d-none .d-lg-flex .d-xl-none</CodeInline></td></tr>
                    <tr><td>Visible only on xl</td> <td><CodeInline>.d-none .d-xl-flex</CodeInline></td></tr>
                </tbody>
            </MudSimpleTable>
            <SectionContent DarkenBackground="true" DisplayFlex="true" Class="mt-6">
                <DisplayVisibilyExample />
            </SectionContent>
            <SectionSource Code="DisplayVisibilyExample" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>